<template>
	<view>
		<!-- navbar -->
		<u-navbar placeholder>
			<view slot="left" @click="toSearch">
				<u-search shape="square" placeholder="动态|圈子|用户" :disabled="true" :show-action="false"></u-search>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<view v-if="swiperList.length" class="swiper-box">
			<u-swiper @click="onSwiper" :list="swiperList" keyName="cover_img" :radius="5"></u-swiper>
		</view>
		<!-- 热门圈子 -->
		<view class="block-title">
			<view class="left">热门圈子</view>
			<navigator url="/pages/topic/class-list" hover-class="none" class="right">
				<text>更多圈子</text>
				<u-icon name="arrow-right" color="#999" size="30rpx"></u-icon>
			</navigator>
		</view>
		<scroll-view scroll-x>
			<view class="hot-topic">
				<navigator hover-class="none" :url="'/pages/topic/index?topic_id=' + item.id" class="topic-item"
					v-for="(item, index) in topicHotList" :key="index">
					<view class="cover-box">
						<image :src="$utils.imgPath(item.cover_image)" class="cover-img" mode="aspectFill"></image>
					</view>
					<view class="footer">
						<view class="topic-name u-line-1">{{ item.name }}</view>
						<view class="num-wrap">
							<!-- <text class="num">{{ item.post_num }} 条动态</text> -->
							<text class="num">{{ item.user_num }}个用户在热议</text>
						</view>
					</view>
				</navigator>
			</view>
		</scroll-view>
		<!-- tabs -->
		<u-tabs :list="classList" :current="current" @change="tabChange" lineColor="#000"></u-tabs>
		<!-- 帖子列表 -->
		<q-index-post-list :list="postList" :loadStatus="loadStatus"></q-index-post-list>

		<q-tabbar :selected="0"></q-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				classList: [],
				classId: '',
				postList: [],
				loadStatus: 'loadmore',
				current: 0,
				swiperList: [],
				topicHotList: []
			};
		},
		onLoad() {
			this.getClassList();
			this.getLinkList();
			this.getHotTopic();
			this.getPostList();
		},
		onShow() {
			this.$store.dispatch('getMessage');
		},
		onReachBottom() {
			this.page++;
			this.getPostList();
		},
		onPullDownRefresh() {
			this.getLinkList();
			this.getHotTopic();
			this.getClassList();
			this.page = 1;
			this.postList = [];
			this.getPostList();
			uni.stopPullDownRefresh();
		},
		methods: {
			getHotTopic() {
				this.$H.get('topic/hot').then((res) => {
					this.topicHotList = res.result;
				});
			},
			jumpTopic(id) {
				uni.navigateTo({
					url: '/pages/topic/detail?id=' + id
				});
			},
			previewImage(url, urls) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				});
			},
			// 获取圈子列表
			getPostList() {
				this.loadStatus = 'loading';
				this.$H
					.post('post/getListByPage', {
						queryForm: {
							class_id: this.classId
						},
						page: this.page
					})
					.then((res) => {
						this.postList = this.postList.concat(res.result.list);
						if (res.result.hasMorePages) {
							this.loadStatus = 'loadmore';
						} else {
							this.loadStatus = 'nomore';
						}
					});
			},
			// 处理点击轮播图跳转
			onSwiper(index) {
				let link = this.swiperList[index];

				//跳转页面
				if (link.type == 1) {
					uni.navigateTo({
						url: link.url
					})
				}

				//跳转外部小程序
				if (link.type == 2) {
					uni.navigateToMiniProgram({
						appId: link.app_id,
						path: link.url
					});
				}

				//跳转页面
				if (link.type == 3) {
					uni.navigateTo({
						url: '/pages/webview/webview?src=' + url
					});
				}

			},
			// 获取轮播图
			getLinkList() {
				this.$H
					.post('link/getList', {
						type: 3
					})
					.then((res) => {
						let linkList = res.result

						linkList.forEach((item, index) => {
							item.cover_img = this.$utils.imgPath(item.cover_img)
						})

						this.swiperList = linkList;
					});
			},
			getClassList() {
				let that = this;
				this.$H.get('Category/getList').then((res) => {
					let classList = [{
						id: '',
						name: '推荐'
					}];

					this.classList = classList.concat(res.result);
				});
			},
			tabChange(e) {
				this.page = 1;
				this.current = e.index;
				this.classId = e.id;
				this.postList = [];
				this.getPostList();
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.swiper-box {
		padding: 20rpx;
	}

	// 热门圈子
	.hot-topic {
		padding: 20rpx;
		display: flex;

		.topic-item {
			flex-shrink: 0;
			width: 200rpx;
			margin: 0 10rpx;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 5rpx 5rpx 10rpx #eee;
			background-color: #fff;

			.cover-box {
				position: relative;

				.cover-img {
					width: 100%;
					height: 200rpx;
					display: block;
				}
			}

			.footer {
				padding: 10rpx;

				.topic-name {
					font-weight: bold;
					font-size: 28rpx;
					text-align: center;
				}

				.num-wrap {
					display: flex;

					.num {
						margin: 0 auto;
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}

	// 块标题
	.block-title {
		font-weight: bold;
		padding: 20rpx;
		color: #616161;
		display: flex;
		font-size: 28rpx;

		.right {
			margin-left: auto;
			color: #999;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}
	}

	// 帖子
	.topic-wrap {
		background-color: #fff;
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;

		.info-wrap {
			display: flex;

			.cover-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.right {
				.name {
					font-weight: bold;
				}

				.count-wrap {
					font-size: 24rpx;
					color: #616161;

					text {
						margin-right: 10rpx;
					}
				}
			}
		}

		.post-img-wrap {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 10rpx;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>